<template>
  <div class="purchasehistory">
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="purchasehistoryFrom" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="更新时间：">
          <el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始时间"
            end-placeholder="结束时间" @change="timeChangeFn" />
        </el-form-item>
        <el-form-item label="SKU名称">
          <pb-input v-model="purchasehistoryFrom.skuName" placeholder="请输入SKU名称"></pb-input>
        </el-form-item>
      </el-form>
    </searchCard>
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="m-t2 m-b2 lines">

        </div>
        <div class="content-box">
          <div class="table-box flex">
            <div class="left-tree-box">
              <pb-tree :style="{ maxHeight: treeH }" @nodeClick="nodeClick" :treeData="skuTreeData"
                :defaultProps="treeProps"></pb-tree>
            </div>
            <div class="table-right">
              <pb-table :column="SKUColumn" :tableData="SKUTableData" :bottomElement="['pb-page']">
                <template #operate="{ row }">
                  <pb-button v-hasPerm="'center:purchasehistory:view'" text size="small"
                    @click="onDetailsFn(row)">详情</pb-button>
                </template>
              </pb-table>
              <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
                @onChange="onPagesChange" :total="pages.total"></pb-pagination>
            </div>
          </div>
        </div>
      </pb-card>
    </div>
    <Details ref="refDetails" />
  </div>
</template>
<script setup lang="ts">
import { getSkuClassList } from "@/api/Sku";
import Details from './components/detail.vue'
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
const refDetails = ref(null as any)
const onDetailsFn = (row: any) => {
  refDetails.value.show(row)
}
import { GetSkuHistoryPurchaseListApi } from '@/api/Purchasing'
import { formattedDate } from '@/utils/moment'
const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const purchasehistoryFrom = reactive({
  skuName: '',
  startDate: '',
  endDate: ''
})
const pages = ref(pageInit());
const onPagesChange = () => {
  getSkuHistoryListApi()
}
const searchFn = () => {
  getSkuHistoryListApi()
}
const resetFn = () => {
  clearObjKey(purchasehistoryFrom)
  value1.value = ''
  getSkuHistoryListApi()
}
const timeChangeFn = (time: any) => {
  purchasehistoryFrom.startDate = formattedDate(time[0], 'YYYY-MM-DD')
  purchasehistoryFrom.endDate = formattedDate(time[1], 'YYYY-MM-DD')
}
const value1 = ref('')
onMounted(() => {
  getSkuClassList({
    pageSize: -1
  }).then((res) => {
    skuTreeData.value = [
      {
        skuClassName: "全部",
        children: res.data.records,
      }
    ];
    getSkuHistoryListApi();
    var height = document.getElementsByClassName("pb-table");
    // console.log(height[0].offsetHeight, '222')
    treeH.value = height[0].offsetHeight + "px";

    window.addEventListener("resize", () => {
      height = document.getElementsByClassName("pb-table");

      treeH.value = height[0].offsetHeight + "px";
    });
  });
})
const SKUTableData = ref([]);
const skuTreeData = ref([]);
const SKUColumn = reactive([
  {
    key: "skuClassName",
    name: "SKU类别"
  },
  {
    key: "skuName",
    name: "SKU名称",
  },
  {
    key: "price",
    name: "最新价格(元)",
    align: "right",
  },
  {
    key: "accountingUnitName",
    name: "计量单位",
  }, {
    key: "specifications",
    name: "规格",
  },
  {
    key: "unitWeight",
    name: "单位重量（kg)",
    align: "right",
  },
  {
    key: "createTime",
    name: "更新时间",
    align: "right",
  },
  {
    slot: 'operate',
    name: '操作'
  }
]);
const treeProps = { children: "children", label: "skuClassName" };

// 选择节点
const skuClassCode = ref("");
const nodeClick = ({ curNode }) => {
  // console.log(curNode, '22')
  skuClassCode.value = curNode.skuClassCode;
  getSkuHistoryListApi();
};

// 获取sku信息列表
const getSkuHistoryListApi = () => {
  return new Promise<void>((resolve, reject) => {
    let { currentPage, pageSize } = { ...pages.value };
    let params = {
      currentPage,
      pageSize,
      skuClassCode: skuClassCode.value,
      ...purchasehistoryFrom,
    };
    GetSkuHistoryPurchaseListApi(params).then((res) => {
      if (res.code == 2000) {
        SKUTableData.value = res.data.records;
        pages.value.total = res.data.total;
      }
    });
  });
};

let treeH = ref(null as any);
</script>
<style lang="scss" scoped>
.purchasehistory {
  .table-right {
    // width: 80%;
    flex: 1;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
}
</style>
